<template>
  <div class="dark-mode-container" ref="parentContainerRef">
    <process-designer designer-form="" bpmn-xml=""></process-designer>
  </div>
</template>

<script setup lang="js">
import {ref} from 'vue';

const parentContainerRef = ref();
const designerForm = ref({
  modelId: '',
  form: {
    processName: '',
    processKey: ''
  }
});
const bpmnXml = ref('');
</script>

<style scoped>
.mb-4 {
  margin-bottom: 10px;
}

.dark-mode-container {
  position: fixed; /* 保证覆盖整个视口 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Microsoft YaHei", sans-serif;
}
</style>

<!-- 全局样式：不能加 scoped -->
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* 防止闪烁 */
  background-color: #121212;
}
</style>
